<template>
  <div id="app">
    <!-- 搜索盒子 -->
    <div class="searchbox">
      <span></span>
      <input
        type="text"
        class="search-input"
        name=""
        id=""
        placeholder="总有你想要的"
      />
      <span class="search">| 搜索</span>
    </div>
    <!-- 分类内容 -->
    <div class="Category">
      <div class="leftcontent">
        <ul class="leftlist">
          <li
            class="leftlis"
            @click="tablist(index)"
            v-for="(item, index) in list"
            :key="index"
          >
            {{ item.cateGory }}
          </li>
          <!-- <li class="leftlis">臻选主机</li>
          <li class="leftlis">臻选主机</li>
          <li class="leftlis">臻选主机</li>
          <li class="leftlis">臻选主机</li>
          <li class="leftlis">臻选主机</li>
          <li class="leftlis">臻选主机</li>
          <li class="leftlis">臻选主机</li> -->
        </ul>
      </div>
      <div class="rightcontent">
        <div>
          <img
            src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20241108/20241108130356016251.png"
            alt=""
            class="img"
          />
        </div>
        <div class="pdtitlelist">
          <ul class="titilelist" v-for="(item, index) in list" :key="index">
            <li
              :class="actindex == indexx ? 'titlelis  active' : 'titlelis'"
              v-for="(items, indexx) in item.scateGory"
              :key="indexx"
              v-show="inx == index ? true : false"
              @click="titlelis(indexx)"
            >
              {{ items.topGory }}
            </li>
          </ul>
        </div>
        <!-- 商品 -->
        <div class="goods">
          <ul class="goodsList">
            <li
              class="goodsLis"
              v-for="(item, index) in list"
              :key="index"
              v-show="inx == index ? true : false"
            >
              <div
                class="product"
                v-for="(items, indexx) in item.scateGory"
                :key="indexx"
              >
                <div class="secondary">
                  <div>{{ items.topGory }}</div>
                  <div>更多></div>
                </div>
                <ul class="productList">
                  <li
                    class="productLis"
                    @click="goshopdetail"
                    v-for="(itemss, indexx) in items.detailData"
                    :key="indexx"
                  >
                    <img :src="itemss.imgSrc" alt="" />
                    <div class="goodsName">{{ itemss.goodsName }}</div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <btn1></btn1>
    <router-view></router-view>
  </div>
</template>
<script>
import btn1 from "../components/botButton.vue";
export default {
  data() {
    return {
      list: [],
      inx: 0,
      nums: 0,
      actindex: 0,
    };
  },
  components: {
    btn1,
  },
  methods: {
    // 获取数据
    async getDetail() {
      let res = await this.axios({
        url: "http://127.0.0.1:5090/classification/getclassification",
        method: "get",
      });
      console.log(res);
      this.list = res.data.data[0].list;
      console.log(this.list);
    },
    // 点击事件
    tablist(index) {
      console.log(index);
      this.inx = index;
    },
    titlelis(index) {
      console.log(index);
      this.nums = index;
      this.actindex = index;
    },
    goshopdetail() {
      this.$router.push({ path: "/shopdetail" });
    },
  },
  mounted() {
    this.getDetail();
  },
};
</script>
<style lang="scss" scoped>
@import url("../assets/scss/reset.scss");
@import url("../../public/detail.css");
</style>